<template>
  <div>
    <van-uploader v-model="fileList" :after-read="afterRead" />
  </div>
</template>
<script>
import { policy } from "@/api/oss";
import axios from "axios";
export default {
  name: "multiUpload",
  props: {
    //图片属性数组
    value: Array
  },
  data() {
    return {
      fileList: []
    };
  },
  watch: {
    value: {
      handler(newValue, oldValue) {
        this.fileList = [];
        for (let i = 0; i < newValue.length; i++) {
          this.fileList.push({ url: newValue[i] });
        }
      },
      immediate: true
    }
  },

  methods: {
    emitInput() {
      let value = [];
      for (let i = 0; i < this.fileList.length; i++) {
        value.push(this.fileList[i].url);
      }
      this.$emit("input", value);
    },
    afterRead(file) {
      file.status = "uploading";
      file.message = "上传中...";
      this.update(file);
    },
    update(file) {
      // 上传照片

      let param = new FormData(); // 创建form对象
      param.append("fileName", file.file); // 通过append向form对象添加数据
      let config = {
        headers: { "Content-Type": "multipart/form-data" }
      };
      // 添加请求头
      axios
        .post(process.env.UPIMG_API + "/aliyunoss/upimage", param, config)
        .then(res => {
          if (res.data.code === 200) {
            let reusle = res.data.data;
            file.url = reusle.url;
            file.status = "succeed";
          }
          this.emitInput();
        })
        .catch(res => {
          file.status = "failed";
          file.message = "上传失败";
        });
    }
  }
};
</script>
<style>
</style>


